<template>
	<div class="carousel slide carousel-fade" id="myCarousel" data-bs-ride="carousel" ref="theCarousel">
		<ol class="carousel-indicators">
			<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
			<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
			<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div v-for="(item,i) in dataList" :key="i" class="carousel-item position-relative bg-cover"
				:class="i===0?'active':''" :style="`background-image: url(${item.img});`">
				<div class="container position-absolute my-4">
					<h1 class="text-warning fw-bold">{{item.title}}</h1>
					<p class="text-warning">
						{{item.subTitle}}
					</p>
					<router-link :to="item.path" class="btn btn-lg btn-warning">
						购买
					</router-link>
				</div>
			</div>
		</div>

		<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
		</button>
	</div>
</template>

<script>
	export default {
		name: "carousel",
		data() {
			return {
				dataList: [{
						img: "/fruite/index/images/banner-01.jpg",
						title: "欢迎来到我们的果蔬商城",
						subTitle: "我们致力于提供最优质的果蔬",
						path: "/fruite"
					},
					{
						img: "/fruite/index/images/banner-02.jpg",
						title: "新品上市",
						subTitle: "优质新鲜，实惠放心",
						path: "/fruite"
					},
					{
						img: "/fruite/index/images/banner-04.jpg",
						title: "当季鲜果",
						subTitle: "绿色天然 健康快乐",
						path: "/fruite"
					},
				]
			}
		},

		mounted() {			
			// 初始化轮播
			new bootstrap.Carousel(this.$refs['theCarousel'], {
				interval: 2000, // 自动播放的时间间隔
			})
			

		}
	}
</script>

<style scoped>
	/* 轮播图 */
	.carousel-item {
		height: 32rem;
		background-position: center;
		background-size: cover;
	}

	.carousel-item .container {
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>